<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="发起提现"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="提现金额"
            name="withdrawalAmount"
            :rules="[{ required: true, message: '提现金额不能为空!' }]"
          >
            <a-input
              v-model:value="formData.withdrawalAmount"
              type="number"
              :placeholder="`请输入提现金额（可提现${money}元）`"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>

          <a-form-item label="实际到账">
            <a-typography-title :level="5">¥4327827元</a-typography-title>
          </a-form-item>

          <a-form-item label="提现方式">
            <a-space direction="vertical" style="width: 100%" :size="16">
              <div
                class="layout-flexSpace"
                v-for="(item, index) in modeList"
                :key="index"
              >
                <a-space wrap>
                  <img
                    :src="item.icon"
                    alt=""
                    style="width: 20px; height: 20px"
                  />
                  <div>{{ item.label }}</div>
                </a-space>

                <a-space wrap @click="change(index)">
                  <a-typography-text type="secondary">{{
                    item.content
                  }}</a-typography-text>
                  <img
                    src="../../../assets/radio-checked.png"
                    alt=""
                    style="width: 16px; height: 16px"
                    v-if="current == index"
                  />
                  <img
                    src="../../../assets/radio-not-checked.png"
                    alt=""
                    style="width: 16px; height: 16px"
                    v-else
                  />
                </a-space>
              </div>
            </a-space>
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-button type="primary">发起提现</a-button>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import WeChat from '@/assets/WeChat.png'
import Alipay from '@/assets/Alipay.png'
import bankCard from '@/assets/bankCard.png'

const modalOpen = ref(false)

const formData = ref({
  withdrawalAmount: null,
})
const current = ref(0)
const modeList = ref([
  {
    icon: WeChat,
    label: '提现到微信',
    content: 'yu234927429',
  },
  {
    icon: Alipay,
    label: '提现到支付宝',
    content: 'yu234927429',
  },
  {
    icon: bankCard,
    label: '提现到银行卡',
    content: '中国建设银行 432423425232524',
  },
])

const change = (index) => {
  current.value = index
}

const money = ref(4327827)
const open = (id) => {
  if (id !== 0) {
  }
  modalOpen.value = true
}

defineExpose({ modalOpen, open })
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
